import React from 'react';
import {Form, Table} from 'antd';
import SearchForm from '../../components/AutoForm/SearchForm';
import {connect} from "dva";
import moment from "moment";


@connect(({oilRechange, loading}) => ({
  tableLoading: loading.effects['oilRechange/page'],
  tableData: oilRechange.pageList,
  pagination: oilRechange.pagination,
  columns: oilRechange.columns,
  searchFields: oilRechange.searchFields,
  searchValues: oilRechange.searchValues,
  editId: oilRechange.editId,
  selectionIds: oilRechange.selectionIds,
  selectedRows: oilRechange.selectedRows,
  columnsOil: oilRechange.columnsOil,
}))
class EditableTable extends React.Component {

  componentDidMount() {
    this.handleSearch();
  }
  cancel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'oilRechange/handleEdit',
      payload: ''
    })
  };


  handleSearchChange = (fields) => {
    const {dispatch} = this.props;
    dispatch({
      type: 'oilRechange/handleSearchChange',
      payload: fields
    })
  }


  handleSearch = (flag) => {
    const {dispatch, pagination, searchValues} = this.props;
    let pageParam = {pageSize: pagination.pageSize, current: flag==='btn' ? 1 : pagination.current}
    let searchParam = {};
    Object.keys(searchValues).map((key) => {
      if (key === 'createTimeArray') {
        const dateArray = searchValues[key]['value'];
        if (dateArray && dateArray.length) {
          let startTime = moment(dateArray[0]);
          let endTime = moment(dateArray[1]);
          searchParam[key] = [];
          searchParam[key].push(startTime.format('YYYY-MM-DD'));
          searchParam[key].push(endTime.format('YYYY-MM-DD'));
        }
      }else{
        searchParam[key] = searchValues[key]['value'];
      }
    })
    const param = {
      ...searchParam,
      ...pageParam
    };
    dispatch({
      type: 'oilRechange/page',
      payload: param
    })
  }

  onChange = (selectedRowKeys, selectedRows) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'oilRechange/handleSelection',
      payload: {selectedRowKeys, selectedRows}
    })
  }

  expandedRowRender = record => {
    const { columnsOil } = this.props;
    return <Table size="small" columns={columnsOil} dataSource={record.tmsCarOils} />;
  };

  render() {
    const {
      columns,
      pagination,
      tableLoading,
      oilLoading,
      tableData,
      searchFields,
      searchValues,
      insureLoading,
      dispatch
    } = this.props;


    pagination.onChange = (page, pageSize) => {
      let searchParam = {};
      Object.keys(searchValues).map((key) => {
        searchParam[key] = searchValues[key]['value'];
      })
      dispatch({
        type: 'oilRechange/page',
        payload: {
          ...searchParam,
          current: page,
          pageSize
        }
      })
    }
    pagination.onShowSizeChange = (current, size) => {
      let searchParam = {};
      Object.keys(searchValues).map((key) => {
        searchParam[key] = searchValues[key]['value'];
      })
      dispatch({
        type: 'oilRechange/page',
        payload: {
          ...searchParam,
          current: current,
          pageSize: size
        }
      })
    }

    const rowSelection = {
      type: "checkbox",
      selections: this.props.selectedRows,
      selectedRowKeys: this.props.selectionIds,
      onChange: this.onChange
    };

    return (
      <oilRechanged bodyStyle={{padding: 0}}>
        <SearchForm
          header="加油记录->操作"
          layout="inline"
          onFieldsChange={this.handleSearchChange}
          onSubmit={() => {this.handleSearch('btn')}}
          fields={searchFields}
          fieldValue={searchValues}
        />

          <Table
            bordered
            rowKey="id"
            loading={tableLoading}
            dataSource={tableData}
            columns={columns}
           /* rowSelection={rowSelection}*/
            rowClassName="editable-row"
            scroll={{x: 'max-content'}}
            size="small"
            pagination={pagination}
            expandedRowRender={this.expandedRowRender}
          />
      </oilRechanged>
    );
  }
}

const EditableFormTable = Form.create()(EditableTable);
export default EditableFormTable;
